<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
    <div class="top">
        <div class="top--back"><img src="image/back.png" alt="" class="top--img"></div>
        <span class="top--title">消息(52)</span>
        <div class="top--person">
            <img src="image/linxiren.png" alt="">
            <span>+</span>
        </div>
    </div>
    <div class="body">
        <ul>
            <li>
                <div class="body--li">
                <span class="body--icon"><img src="image/账户通知.png" alt="" class="body--icon--img"></span>
                <div class="body--content">
                    <p class="body--content--txt1">账户通知</p>
                    <p class="body--content--txt2">您有一张价值20元的超值优惠劵今日到期...</p>
                </div>
                <span class="body--time">2018/11/10</span>
                </div>
                <div class="del">删除</div>
            </li>
            <li>
                <div class="body--li">
                <span class="body--icon1"><img src="image/优惠.png" alt="" class="body--icon--img"></span>
                <div class="body--content">
                    <p class="body--content--txt1">优惠促销</p>
                    <p class="body--content--txt2">合计73元 全品类通用券 免费领取，...</p>
                </div>
                <span class="body--time1">2018/11/09</span>
                </div>
                <div class="del">删除</div>
            </li>
        </ul>
    </div>
    <div class="before--information">
        <div class="before--information--title">
            <img src="image/time.png" alt="">
            <span>两周前的消息</span>
        </div>
        <ul>
            <li>
                <div class="body--li">
                <span class="body--icon2"><img src="image/服务通知.png" alt="" class="body--icon--img"></span>
                <div class="body--content">
                    <p class="body--content--txt1">服务通知</p>
                    <p class="body--content--txt2">您购物车中的【飞利浦(PHILIPS)男士...</p>
                </div>
                <span class="body--time1">2018/10/22</span>
                </div>
                <div class="del">删除</div>
            </li>
            <li>
                <div class="body--li">
                <span class="body--icon3"><img src="image/京东.png" alt="" class="body--icon--img"></span>
                <div class="body--content">
                    <p class="body--content--txt1">京东客服</p>
                    <p class="body--content--txt2">Hi~jd_4ff2e06769461,购好物上京东，...</p>
                </div>
                <span class="body--time1">2018/08/17</span>
                </div>
                <div class="del">删除</div>
            </li>
        </ul>
    </div>
</div>
</body>
<script src="node_modules/lib-flexible/flexible.js"></script>
<script>
    document.addEventListener('DOMContentLoaded',function(){
        var oUl=document.querySelector('ul');
        var aLi=document.querySelectorAll('li');
        var aDiv=document.querySelectorAll('.body--li');
        var aDel=document.querySelectorAll('.del');
        var n=0;
        for(var i=0;i<aLi.length;i++){
            console.log(i);
            aLi[i].index=i;
            //滑动开始
            aLi[i].addEventListener('touchstart',function(ev){
                ev.preventDefault();
                var oldX=ev.targetTouches[0].pageX;
                console.log(oldX);
                function fnMove(ev){
                    ev.preventDefault();
                    var newX=ev.targetTouches[0].pageX-oldX;
                    aLi[this.index].style.transform='translateX('+newX+'px)';
                }
                function fnEnd(ev){
                    aLi[this.index].removeEventListener('touchmove', fnMove,false);
                    aLi[this.index].removeEventListener('touchend', fnEnd,false);
                    ev.preventDefault();
                    var changeX=ev.changedTouches[0].pageX;
                    if(oldX-changeX > 40){
                        aLi[this.index].style.transition='1s all ease';
                        aLi[this.index].style.transform='translateX(-4rem)';
                    }else{
                        aLi[this.index].style.transform='translateX(0)';
                    }
                }
                aLi[this.index].addEventListener('touchmove', fnMove,false);
                aLi[this.index].addEventListener('touchend', fnEnd,false);
            },false)
            //删除按钮
            aDel[i].index=i;
            aDel[i].addEventListener('touchstart', function(){
                this.innerHTML='';
                this.style.height='0';
                this.style.transition='0.5s all ease';
                aLi[this.index].style.height='0';
                aLi[this.index].style.transition='0.5s all ease';
                aDiv[this.index].style.height='0';
                aDiv[this.index].style.transition='0.5s all ease';
                aDiv[this.index].innerHTML='';
                this.addEventListener('transitionend',function(){
                    oUl.removeChild(aLi[this.index]);
                }, false)
            },false)
        }
    },false)
</script>

</html>